"use client";
import { SearchBar, Swiper } from "antd-mobile";
import { BellOutline } from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
import { useState, useEffect } from "react";
import "./shou.css";
import image4 from "/img(1)/image(1).png";
import image1 from "/img(1)/image(2).png";
import image2 from "/img(1)/image(3).png";
import image3 from "/img(1)/image(4).png";

import image5 from "/img(2)/image(1).png";
import image6 from "/img(2)/image(2).png";
import image7 from "/img(2)/image(3).png";
import image8 from "/img(2)/image(4).png";
import image9 from "/img(2)/image(5).png";
import image10 from "/img(3)/image(1).png";
import image11 from "/img(3)/image(2).png";
import image12 from "/img(3)/image(3).png";
// 组件外部定义截止时间（比如3天后）
const DEADLINE = Date.now() + 3 * 24 * 60 * 60 * 1000;
   
export default function Xiang() {
  const navigate = useNavigate();
  const [remain, setRemain] = useState(DEADLINE - Date.now());
  useEffect(() => {
    const timer = setInterval(() => {
      setRemain(DEADLINE - Date.now());
    }, 1000);
    return () => clearInterval(timer);
  }, []);
  // 计算天、时、分、秒
  const totalSeconds = Math.max(0, Math.floor(remain / 1000));
  const days = Math.floor(totalSeconds / (24 * 3600));
  const hours = Math.floor((totalSeconds % (24 * 3600)) / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  const seconds = totalSeconds % 60;

  // 商品数组
  const products = [
    {
      img: image10,
      name: "阿瓦斯丁克隆抗体",
      price: 168,
      oldPrice: 198,
      percent: 68,
      color: "#FFD6D6",
      barColor: "#FFB6B6",
    },
    {
      img: image11,
      name: "阿瓦斯丁克隆抗体",
      price: 168,
      oldPrice: 198,
      percent: 34,
      color: "#FFF7D6",
      barColor: "#FFE7A0",
    },
    {
      img: image12,
      name: "阿瓦斯丁克隆抗体",
      price: 168,
      oldPrice: 198,
      percent: 51,
      color: "#E6E6FF",
      barColor: "#B6B6FF",
    },
  ];

  return (
    <>
      <div className="qwe">
        <div
          className="qwe1"
          onClick={() => {
            navigate("/sear");
          }}
        >
          <SearchBar placeholder="请输入内容" />
        </div>

        <BellOutline fontSize={20} />
      </div>
      <div style={{ margin: "16px 0" }}>
        <Swiper
          style={{ "--height": "180px" }}
          loop
          autoplay
          autoplayInterval={4000}
        >
          <Swiper.Item>
            <img
              src={image4}
              alt="轮播1"
              style={{ width: "100%", height: "100%", objectFit: "cover" }}
            />
          </Swiper.Item>
          <Swiper.Item>
            <img
              src={image1}
              alt="轮播2"
              style={{ width: "100%", height: "100%", objectFit: "cover" }}
            />
          </Swiper.Item>
          <Swiper.Item>
            <img
              src={image2}
              alt="轮播3"
              style={{ width: "100%", height: "100%", objectFit: "cover" }}
            />
          </Swiper.Item>
          <Swiper.Item>
            <img
              src={image3}
              alt="轮播4"
              style={{ width: "100%", height: "100%", objectFit: "cover" }}
            />
          </Swiper.Item>
        </Swiper>
      </div>

      <div className="q">
        <div
          onClick={() => {
            console.log();
          }}
        >
          <img src={image5} alt="" />
          <p>对症找药</p>
        </div>
        <div
          onClick={() => {
            console.log();
          }}
        >
          <img src={image6} alt="" />
          <p>常用药物</p>
        </div>
        <div
          onClick={() => {
            console.log();
          }}
        >
          <img src={image7} alt="" />
          <p>欺药回收</p>
        </div>
        <div
          onClick={() => {
            console.log();
          }}
        >
          <img src={image8} style={{ width: "100%", height: "100%" }} alt="" />
          <p>换季必备</p>
        </div>
        <div
          onClick={() => {
            console.log();
          }}
        >
          <img src={image9} style={{ width: "85%", height: "80%" }} alt="" />
          <p>处方购药</p>
        </div>
      </div>
      <div>
        <div className="qwe">
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <h2 style={{ margin: 0 }}>限时优惠</h2>
            <span>
              <b>{days}</b>天<b>{hours.toString().padStart(2, "0")}</b>时
              <b>{minutes.toString().padStart(2, "0")}</b>分
              <b>{seconds.toString().padStart(2, "0")}</b>秒
            </span>
          </div>
          <p
            onClick={() => {
              navigate("/xian");
            }}
          >
            全部 &gt;&gt;{" "}
          </p>
        </div>
        {/* 商品卡片数组渲染 */}
        <div
          style={{
            display: "flex",
            justifyContent: "space-around",
            flexWrap: "wrap",
          }}
        >
          {products.map((item, idx) => (
            <div
              key={idx}
              style={{
                background: item.color,
                borderRadius: "16px",
                padding: "12px",
                width: "120px",
                boxSizing: "border-box",
                margin: "8px 0",
              }}
            >
              <img src={item.img} alt="" style={{ width: "100%" }} />
              <div style={{ fontWeight: 600, margin: "8px 0 4px" }}>
                {item.name}
              </div>
              <div>
                <span style={{ color: "#f44", fontWeight: 700 }}>
                  ￥{item.price}
                </span>
                <span
                  style={{
                    textDecoration: "line-through",
                    color: "#999",
                    marginLeft: 4,
                  }}
                >
                  ￥{item.oldPrice}
                </span>
              </div>
              <div style={{ margin: "8px 0" }}>
                <div
                  style={{
                    background: "#eee",
                    borderRadius: "8px",
                    height: "8px",
                    width: "100%",
                    overflow: "hidden",
                  }}
                >
                  <div
                    style={{
                      width: `${item.percent}%`,
                      background: item.barColor,
                      height: "100%",
                    }}
                  />
                </div>
                <div style={{ fontSize: "12px", color: "#999", marginTop: 2 }}>
                  已抢 {item.percent}%
                </div>
              </div>
              <button
                style={{
                  width: "100%",
                  background: "#fff",
                  border: "none",
                  borderRadius: "8px",
                  padding: "6px 0",
                  color: "#888",

                  cursor: "pointer",
                }}
                onClick={() => {
                  console.log("去抢购");
                }}
              >
                去抢购
              </button>
            </div>
          ))}
        </div>
        {/* 促销专区 */}
        <div
          style={{
            background: "#fff",
            borderRadius: 16,
            margin: "24px 0",
            padding: 16,
          }}
        >
          <div style={{ fontWeight: 700, fontSize: 18, marginBottom: 16 }}>
            促销专区
          </div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 16 }}>
            {[
              {
                title: "慢病用药",
                desc: "满100减10",
                bg: "#E3F1FF",
                btnBg: "#4A90E2",
              },
              {
                title: "儿童用药",
                desc: "满100减30",
                bg: "#FFE3E3",
                btnBg: "#FF7A7A",
              },
              {
                title: "家庭设备",
                desc: "满120减20",
                bg: "#E3F7F0",
                btnBg: "#34C759",
              },
              {
                title: "日常用药",
                desc: "满90减20",
                bg: "#E3FFF6",
                btnBg: "#00C6AE",
              },
            ].map((item, idx) => (
              <div
                key={idx}
                style={{
                  background: item.bg,
                  borderRadius: 12,
                  width: "45%",
                  marginBottom: 12,
                  padding: 16,
                  boxSizing: "border-box",
                }}
                onClick={() => {
                  console.log("点击了");
                }}
              >
                <div style={{ fontWeight: 600, fontSize: 16 }}>
                  {item.title}
                </div>
                <div style={{ margin: "8px 0" }}>
                  <span
                    style={{
                      background: item.btnBg,
                      color: "#fff",
                      borderRadius: 8,
                      padding: "2px 10px",
                      fontSize: 12,
                    }}
                  >
                    {item.desc}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>
        {/* 常用推荐 */}
        <div
          style={{
            background: "#fff",
            borderRadius: 16,
            margin: "24px 0",
            padding: 16,
          }}
        >
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              marginBottom: 12,
            }}
          >
            <div style={{ fontWeight: 700, fontSize: 18 }}>常用推荐</div>
            <div
              style={{ color: "#4A90E2", fontSize: 14 }}
              onClick={() => {
                navigate("/tui");
              }}
            >
              全部 &gt;
            </div>
          </div>
          <div>
            {[
  {
    id: 1,
    name: "善托 霉拮吸入粉雾剂",
    image: image1,
    price: 168.0,
    oldPrice: 198.0,
    desc: "自营/93",
    stock: 20,
    tag: "季节用药",
  },
  {
    id: 2,
    name: "美林 布洛芬小儿混悬液",
    image: image2,
    price: 168.0,
    oldPrice: 198.0,
    desc: "自营/93",
    stock: 20,
    tag: "上海制药",
  },
  {
    id: 3,
    name: "小儿咳喘灵口服液",
    image: image3,
    price: 168.0,
    oldPrice: 198.0,
    desc: "自营/93",
    stock: 20,
    tag: "上海制药",
  },
  {
    id: 4,
    name: "善托 霉拮吸入粉雾剂",
    image: image1,
    price: 168.0,
    oldPrice: 198.0,
    desc: "自营/93",
    stock: 20,
    tag: "季节用药",
  },
  {
    id: 5,
    name: "美林 布洛芬小儿混悬液",
    image: image4,
    price: 168.0,
    oldPrice: 198.0,
    desc: "自营/93",
    stock: 20,
    tag: "上海制药",
  },
].map((item, idx) => (
              <div
                key={item.id}
                style={{
                  display: "flex",
                  alignItems: "center",
                  background: "#fff",
                  borderRadius: 12,
                  margin: "12px 0",
                  padding: 12,
                  boxShadow: "0 2px 8px #f0f1f2",
                }}
                onClick={() => navigate(`/xiangq/${item.id}`)}
              >
                <img
                  src={item.image}
                  alt=""
                  style={{
                    width: 60,
                    height: 60,
                    borderRadius: 8,
                    marginRight: 12,
                  }}
                />
                <div>
                  <div style={{ fontWeight: 600 }}>{item.name}</div>
                  <div style={{ color: "#FF7A7A", fontSize: 12 }}>
                    {item.tag}
                  </div>
                  <div
                    style={{ color: "#FF7A7A", fontWeight: 700, marginTop: 4 }}
                  >
                    ￥{item.price}.00
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}
